<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form"> </XForm>
      </template>
      <template #toolbar_btns>
        <VButton auth="/pmc/base/stocking/add" type="primary" @click="add"> 新增 </VButton>
        <VButton auth="/pmc/base/stocking/import" icon="Download" class="ml-auto" @click="onImport"> 导入 </VButton>
        <!-- <el-button icon="Plus" type="primary" @click="add">新增</el-button>
        <el-button icon="Download" class="ml-auto" @click="onImport">导入</el-button> -->
      </template>
    </VTable>

    <Details ref="DetailsRef" @refresh="query" />

    <!-- <ConfirmInput v-model="batchVisible" v-bind="getCurrentConfirm" @submit="handleConfirmSubmit" /> -->

    <!-- 导入 -->
    <DialogImport v-model="visibleImport" :download-url="downloadUrl" :api="stockingConfigImport" @refresh="query" />
  </VPage>
</template>

<script setup lang="jsx">
import { stockingConfigList, stockingConfigImport } from "@/api/base"
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import Details from "./components/details/index.vue"
import XForm from "@/components/XForm/index.vue"
// import ConfirmInput from '@/components/ConfirmInput/index.vue'

const DetailsRef = ref()

// 导入
import DialogImport from "@/components/DialogImport/index.vue"
const visibleImport = ref(false)

const downloadUrl = ref("")
const onImport = async () => {
  visibleImport.value = true
  console.log(visibleImport.value)
  downloadUrl.value =
    "https://xc2k-pmc.oss-cn-shenzhen.aliyuncs.com/import_template/%E5%BA%93%E5%AD%98%E5%91%A8%E8%BD%AC%E5%A4%A9%E6%95%B0%E7%9B%AE%E6%A0%87%E9%85%8D%E7%BD%AE%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
}

const tableRef = ref()
const data = reactive({
  batchVisible: false,
  getCurrentConfirm: {},
})
const { batchVisible, getCurrentConfirm } = toRefs(data)

// 新增
const add = () => {
  let params = {
    type: "add",
    title: "新增",
  }
  DetailsRef.value.open(params)
}
const openEdit = (row) => {
  let params = {
    type: "edit",
    title: "编辑",
    row: { ...row },
  }
  DetailsRef.value.open(params)
}

// 查询
const query = () => {
  tableRef?.value.query()
}
//获取下拉数据
onMounted(() => {})

const formOption = ref({ inline: true })
const fieldList = ref([
  {
    field: "year",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "year",
      shortcuts: [],
      placeholder: "年份",
      valueFormat: "YYYY",
    },
    style: { width: "120px" },
  },

  {
    field: "state",
    type: "select",
    options: {
      placeholder: "是否启用",
      data: [
        { label: "是", value: "1" },
        { label: "否", value: "0" },
      ],
    },
    style: { width: "120px" },
  },
])

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  columns: [
    { field: "id", title: "序号", width: 60 },
    { field: "year", title: "年份", width: 100 },
    {
      field: "week_start-week_end",
      title: "周维度",
      width: 100,
      slots: {
        default: ({ row }) => (
          <div>
            {row.week_start}-{row.week_end}
          </div>
        ),
      },
    },
    { field: "january_show", title: "一月(天)", width: 100 },
    { field: "february_show", title: "二月(天)", width: 100 },
    { field: "march_show", title: "三月(天)", width: 100 },
    { field: "april_show", title: "四月(天)", width: 100 },
    { field: "may_show", title: "五月(天)", width: 100 },
    { field: "jane_show", title: "六月(天)", width: 100 },
    { field: "july_show", title: "七月(天)", width: 100 },
    { field: "august_show", title: "八月(天)", width: 100 },
    { field: "september_show", title: "九月(天)", width: 100 },
    { field: "october_show", title: "十月(天)", width: 100 },
    { field: "november_show", title: "十一月(天)", width: 100 },
    { field: "december_show", title: "十二月(天)", width: 100 },
    {
      title: "是否启用",
      width: 100,
      slots: {
        default: ({ row }) => <VStatus value={row.state == "1"} />,
      },
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      slots: {
        default: ({ row }) => (
          <div>
            <el-button link type="primary" onClick={() => openEdit(row)}>
              编辑
            </el-button>
          </div>
        ),
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page, form }) => {
        let res = await stockingConfigList({ page: page.pageNum, page_num: page.pageSize, ...form })
        res.data.forEach((item) => {
          daykey.forEach((key) => {
            item[`${key}_show`] = item[key] + "天"
          })
        })
        return res
      },
    },
  },
})
const daykey = ["january", "february", "march", "april", "may", "jane", "july", "august", "september", "october", "november", "december"]
</script>
<style lang="scss" scoped></style>
